import { createRouter, createWebHashHistory } from "vue-router";

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/home",
      component: () => import("./pages/Home.vue"),
    },
    {
      path: "/about",
      component: () => import("./pages/About.vue"),
      beforeEnter: (to, from) => {
        console.log("路由独享守卫");
      },
    },
    {
      path: "/contact",
      component: () => import("./pages/Contact.vue"),
    },
    {
      path: "/info/:id",
      component: () => import("./pages/Info.vue"),
    },
  ],
});

/**
 * next 参数
 *  作用：用于控制是否下一步，是否放行路由导航、重定向、取消导航
 *  PS: VueRouter@4 版本中是个可选的
 *
 *    正常导航:
 *        next()
 *
 *    取消导航：
 *        1. next(false)
 *        2. 不调用 next
 *
 *    重定向：
 *        1. next(字符串路由地址)
 *        2. next(对象路由地址)
 *  不使用 next 的情况，通过函数的返回值来控制是否放行等
 *
 *    正常导航：
 *        1. 不 return
 *        2. return undefined
 *        3. return true
 *
 *    取消导航：
 *        1. return false
 *
 *    重定向：
 *        1. return 字符串路由地址
 *        2. return 对象路由地址
 *
 *
 */

router.beforeEach((to, from) => {
  console.log("全局前置守卫");

  if (to.path === "/home") {
    return "/contact";
  }
});

/**
 * afterEach：
 *    它已经不可以阻止导航了
 */
router.afterEach((to, from) => {
  console.log("全局后置守卫");
});

export default router;
